鐵人賽 Day 16

什麼是 this?

• this 是一個 JavaScript 關鍵字
• this 是 function 執行時，產生的一個內部物件
• 絕大多數情況，this 代表的就是呼叫 function 的物件
• 沒有指明綁定 this 為全域物件也就是 window

為什麼要使用 this

為了要讓 function 有一個明確指定的對象通常是執行時所屬的物件，而不是單純的輸入輸出結果的函式。

this 的綁定基本原則

• 預設綁定
• 隱含式綁定 (Implicit Binding)
• 顯式綁定 (Explicit Binding)
• new 關鍵字綁定

預設綁定

var a = 10;
function foo() {
    var a = 20;
    function bar() {
        console.log(this.a);
    }
    bar();
}
foo(); // 10

以上範例乍看之下執行結果會以為是 20，但是前面強調 this 是看呼叫的對象，最後一行全域物件執行可看作 window.foo()，所以結果是輸出全域變數 var a = 10。
從以上範例也可以看出來， this 的概念和前面細列文章提到的作用域 (Scope)相反，作用域指的是內層 function找不到會往上層去找直到最上層物件。

隱含式綁定

即便 function 在 global scope 被宣告，只要它成為某個物件的參考屬性，function 被呼叫的當下，該 function 即被物件包含。

function func(){
    console.log(this.a)
}

var obj = {
    a:2,
    foo: func
};

func(); // undefiend =>預設綁定
obj.foo; // 2 => 隱含式綁定

顯式綁定

把強制綁定的對象指定給第一個參數，使用方法包括 apply,call,bind
call 跟 apply 的差異在於後面的參數，使用 apply的話必須傳一個陣列。

var a = 10;
function bar() {
    console.log(this.a);
}
var obj1 = {
    a: 20
};
var obj2 = {
    a: 30
};

bar.apply(obj1); // 20
bar.call(obj2); // 30
bar.apply(undefined); // 10

var foo = bar.bind(obj1);
foo(); // 20

new 關鍵字

• 新的物件被建構出來
• this 會指向新建構出來的物件

function foo(a){
    this.a = a
}

var obj = new foo(123);
console.log(obj.a); //123